import {Button, Link, Group, Static, Box} from '../components'
import componentDidMount from "../hoc/componentDidMount";
import {compose, withState} from 'recompose'
import {primaryColor} from '../styles/common-color'


const data = [
    {label:'首页', href:'/' },
    {label:'企业', href:'/home/enterprise' },
    {label:'第三方', href:'/home/third-party' },
    {label:'个人服务', href:'/home/personal' },

]

const Header = ({state: {show,click},setState}: { state: { show: boolean,click:number },setState:Function }) => {

    const style = {
        position: 'fixed',
        top: 0,
        left: 0,
        zIndex: 20
    };
    
    return (
        <Box bgColor={show ? '#fff' : '#e9f5f5'} height='4rem' width='100%' flex='flex' justufy='space-between'
             padding='0 3%' style={style} shadow={show ? '0 0 8px rgba(0, 0, 0, 0.2)' : 'none'}>
            <Group spans={[10, 10, 4]} textAligns={['left', 'center', 'right']}>
                <Box flex='flex' justify='flex-start'>
                    <Static label='蜘蛛云聘' color={primaryColor} fontSize='1.5rem'/>
                </Box>
                <ul className='ul'>
                    {
                        data.map((data,index) =>{
                            return(
                                <li key={index} onClick={() =>setState({click:index})}>
                                    <Link href={data.href} color={click == index ? primaryColor : '#3c4e4e'} label={data.label} fontSize='.875rem'/>
                                </li>
                            )
                        })
                    }
                </ul>
                <Box flex='flex' justify='flex-end'>
                    <Link href='/home/login'><Button type="primary" title="登录"/></Link>
                    <Link href='/home/register'><Button type="primary" ghost title="注册" margin='0 0 0 1rem'/></Link>
                </Box>
            </Group>


            <style jsx>{`
                ul{
                    height: 4rem;
                    line-height:4rem;
                    margin: 0;
                    padding: 0;
                    list-style: none;
                    width:100%;

                    li{
                        float: left;
                        width: 25%;
                        align-items: center;
                    }
                }
        `}</style>
        </Box>
    )
}
export default compose(
    withState('state', 'setState', {
        show: false,
        click: 0
    }),
    componentDidMount([
        ({setState}) => {
            window.onscroll = () => {
                const scrollTop = document.documentElement.scrollTop;

                if (scrollTop > 100) {
                    setState({show: true})
                } else {
                    setState({show: false})
                }
            }
        }
    ])
)(Header)

